/* flex */
.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-justify-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-align-center {
	display: flex;
	align-items: center;
}

.flex-direction-column {
	display: flex;
	flex-direction: column;
}

/* clearfix */
.clearfix::after {
	display: block;
	height: 0;
	overflow: hidden;
	clear: both;
	content: "";
}

/* 文字单行省略号 */
.sle {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 文字多行省略号 */
.mle {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* 文字多了自动換行 */
.break-word {
	word-break: break-all;
	word-wrap: break-word;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
	transition: all 0.2s;
}
.fade-transform-enter-from {
	opacity: 0;
	transition: all 0.2s;
	transform: translateX(-30px);
}
.fade-transform-leave-to {
	opacity: 0;
	transition: all 0.2s;
	transform: translateX(30px);
}

/* breadcrumb-transform */
.breadcrumb-enter-active {
	transition: all 0.2s;
}
.breadcrumb-enter-from,
.breadcrumb-leave-active {
	opacity: 0;
	transform: translateX(10px);
}

/* breadcrumb-transform */
.breadcrumb-enter-active {
	transition: all 0.2s;
}
.breadcrumb-enter-from,
.breadcrumb-leave-active {
	opacity: 0;
	transform: translateX(10px);
}

/* breadcrumb-transform */
.col-enter-active {
	transition: all 0.2s;
}
.col-enter-from,
.col-leave-active {
	opacity: 0;
	transform: translateY(20px);
}

/* scroll bar */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-thumb {
	background-color: var(--el-border-color-darker);
	border-radius: 20px;
}

/* nprogress */
#nprogress .bar {
	background: var(--el-color-primary) !important;
}
#nprogress .spinner-icon {
	border-top-color: var(--el-color-primary) !important;
	border-left-color: var(--el-color-primary) !important;
}
#nprogress .peg {
	box-shadow: 0 0 10px var(--el-color-primary), 0 0 5px var(--el-color-primary) !important;
}

/* 外边距、内边距全局样式 */
@for $i from 0 through 40 {
	.mt#{$i} {
		margin-top: #{$i}px !important;
	}
	.mr#{$i} {
		margin-right: #{$i}px !important;
	}
	.mb#{$i} {
		margin-bottom: #{$i}px !important;
	}
	.ml#{$i} {
		margin-left: #{$i}px !important;
	}
	.pt#{$i} {
		padding-top: #{$i}px !important;
	}
	.pr#{$i} {
		padding-right: #{$i}px !important;
	}
	.pb#{$i} {
		padding-bottom: #{$i}px !important;
	}
	.pl#{$i} {
		padding-left: #{$i}px !important;
	}
}

.m-l-auto {
	margin-left: auto;
}
.m-r-auto {
	margin-right: auto;
}

// font-size
@for $size from 12 through 40 {
	@if $size % 2 == 0 {
		.fs-#{$size} {
			font-size: #{$size}px;
		}
	}
}

// text-align
@each $direction, $value in (l: left, r: right, c: center) {
	.text-#{$direction} {
		text-align: $value;
	}
}

@for $val from 0 through 100 {
	.w-#{$val} {
		width: #{$val};
	}
	.w-#{$val}-p {
		width: $val * 1%;
	}
	.h-#{$val} {
		height: #{$val};
	}
	.h-#{$val}-p {
		height: $val * 1%;
	}
}

.bold {
	font-weight: bold;
}

.pro-table-operation-column {
	display: flex;
	flex-direction: column;
	text-align: left;
	.el-button + .el-button {
		margin-left: 0;
	}
}

.darg-wapper {
	position: relative;
	.drag-box {
		position: absolute;
		left: calc(50% - 50px);
		top: 110px;
		width: 100px;
		height: 100px;
		line-height: 100px;
		font-size: 18px;
		font-weight: bold;
		color: var(--el-color-primary-light-3);
		background: var(--el-color-primary-light-9);
		border-radius: 50%;
		user-select: none;
	}
}
